<template>
	<view class="content">
		<view class="main-box">
			<view class="box-top">
				<img src="static/img/main/demobackground.jpg" alt="" class="item-img">
			</view>
			<view class="box-buttom">
				<h4>我承认去北京这件事情真的是泰库辣！</h4>
			</view>
			<view class="box-art-info">
				<view class="box-user-info">
					<image class="user-avatar" src="../../../../static/img/main/avatar.jpg" mode=""></image>
					<span class="box-user-name">莫大人要...</span>
				</view>
				<view class="box-art-like">
					<image class="art-like" src="../../../../static/img/tabbar/guanzhu.png" mode=""></image>
					<span class="box-user-name">1314</span>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			artPhoto: {
				typeof: String
			},
			avatar: {
				typeof: String
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.content {
	display: flex;
	background-color: beige;
	width: 100%;
	flex-wrap: wrap;
}
.main-box{
	width: 100%;
	background-color: #fff;
	margin-left: 1%;
	margin-top: 2%;
	border-radius: 5px;
	
}
.box-art-info{
	margin-top: 3px;
	padding: 5px;
}
.box-buttom{
	margin: 2px 5px 0 5px;
}
.box-user-info{
	font-size: .5em;
	width: 62%;
	display: flex;
}
.box-art-like{
	display: flex;
}
.item-img{
	width: 100%;
	height: 80%;
}
.box-user-name{
	align-self: center;
	margin-left: 2px;
}
.box-art-info {
	margin-top: 5px;
	display: flex;
}
.user-avatar{
	height: 30px;
	width: 30px;
	border-radius: 50%;
}
.art-like{
	width: 20px;
	height: 20px;
	align-self: center;
}
</style>
